<template>
  <view class="classify">
    <!-- #ifdef H5 -->
    <wd-sticky :offset-top="-44">
      <view class="index-top">
        <view class="index-tab">
          <view @click="tabIndex = item.index" v-for="(item,index) in tabs" :key="index" :class="{'active': tabIndex == item.index}" class="tab-li">
            {{ item.name }}
          </view>
        </view>
      </view>  
    </wd-sticky>
    <!-- #endif -->
    <!-- #ifndef H5 -->
    <wd-sticky :offset-top="44">
      <view class="index-top">
        <view class="index-tab">
          <view @click="tabIndex = item.index" v-for="(item,index) in tabs" :key="index" :class="{'active': tabIndex == item.index}" class="tab-li">
            {{ item.name }}
          </view>
        </view>
      </view>  
    </wd-sticky>
    <view style="height: 44px;"></view>
    <!-- #endif -->
    <view class="global-m">
      <view v-if="tabIndex==3">
        <Steady></Steady>
      </view>
      <view v-else-if="tabIndex==2">
        <Trends></Trends>
      </view>
      <view v-else-if="tabIndex == 1">
        <Billboard></Billboard>
      </view>
      <view v-else-if="tabIndex==4">
        <Ring></Ring>
      </view>
    </view>
    <view style="height: 44px;"></view>
  </view>
  

  <NavBar :index="2"></NavBar>
</template>

<script setup>
import NavBar from '@/section/a-navbar.vue'
import Ring from './ring.vue'
import Billboard from './billboard.vue'
import Steady from './steady.vue'
import Trends from './trends.vue'
import { getCurrentInstance, ref } from 'vue'
const app = getCurrentInstance()
const statusBarHeight = ref( app.appContext.config.globalProperties.$statusBarHeight )
const navBarHeight = ref( app.appContext.config.globalProperties.$navBarHeight )

const tabIndex = ref(1)
const tabs = ref([
  {
    name: '榜单',
    index: 1
  },
  {
    name: '动态',
    index: 2
  },
  {
    name: '静态',
    index: 3
  },
  {
    name: '铃声',
    index: 4
  },
  // {
  //   name: '视频彩铃',
  //   index: 5
  // }
])


</script>

<style scoped lang="scss">
page{
  height: 100vh;
  background: #f5f5f5;
}
.classify{
  background: rgb(245, 245, 245) url('http://124.223.41.167:8080/mobile/static/images/bg.png') no-repeat;
  background-size: 100% 500px;
}
.index-top{
  width: 100vw;
}
.index-tab{
  display: flex;
  height: 3rem;
  padding: 0 1rem;
  align-items: center;
  .tab-li{
    padding: 0 0.8rem;
    position: relative;
  }
  .active{
    font-size: 1.2rem;
  }
  .active::after{
    content: "";
    width: 20px;
    height: 3px;
    background: rgb(220, 64, 100);
    position: absolute;
    left: 50%;
    margin-left: -10px;
    bottom: -10px;
    border-radius: 10px;
  }
}
.grid-box_li{
  position: relative;
}
.gm-fix{
  position: absolute;
  top: 10px;
  right: 10px;
}
.gm-tab_li{
  color: rgba(144, 144, 144, 1);
  font-size: 0.9rem;
  margin-right: 1rem;
}
.gm-tab{
  .active{
    color: rgba(220, 70, 129, 1);
  }
}

</style>